<template>
    <view>
        <uni-notice-bar
                show-icon="true"
                scrollable="true" single="true"
                text="请注意，因为没有企业资质，受微信/支付宝的开发支付功能影响，所有本系统的充值功能，是直接给账户加钱！！">
        </uni-notice-bar>

        <view class="coupon_box">

            <view class="coupon-item" v-for="(item, index) in allList" :key="index">
                <view class="coupon-money">
                    <view class="layof">￥{{item.money}}</view>
                    <view class="msg">{{item.msg}}{{item.money}}元</view>
                </view>
                <view class="get-btn" @click="addMoney(item.money)">立即充值</view>
            </view>

            <view class="coupon-item">
                <view class="coupon-money">
                    <view class="layof">
                        <input type="number" placeholder="请输入自定金额" v-model="money">
                    </view>
                    <view class="msg">请输入自定金额</view>
                </view>
                <view class="get-btn" @click="addMoney(money)">立即充值</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue"
    import { recharge } from '../../common/config'

    export default {
        components: {uniNoticeBar},
        computed: {
            ...mapState(['userInfo']),
        },
        data(){
            return {
                money:0,
                allList:[
                    { money: "50", msg: "直接给账户充"},
                    { money: "100", msg: "直接给账户充"},
                    { money: "150", msg: "直接给账户充"}
                ]

            }
        },
        onLoad() {
        },
        methods:{
            ...mapMutations(['login']),
            async addMoney(money){
                await this.$api.MyRequest(recharge.PostRecharge.url, recharge.PostRecharge.method, { money })
                    .then((res) => {
                        let userInfo = this.userInfo;
                        userInfo.money = res.money;
                        this.login(userInfo);
                        this.msg('充值成功！！');
                    })
                    .catch((e) => {
                    })
            },
        }
    }
</script>

<style lang='scss'>
    page { background:#FFFFFF; }
    .coupon_box {
        width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx;
    }

    .other_type {
        width:100%; height:90upx; padding-top:50upx;

        .text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; }
        .text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:28upx; }
    }
    .coupon-item {
        width:100%; height:auto; display:table; border-radius:10upx; padding:0 20upx; margin-top:22upx; border:1px solid #eeeeee; position:relative;
        .coupon-money {
            width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;

            .nick { width:100%; height:50upx; line-height:30upx; font-size:24upx; color:#999999; }
            .tit { width:100%; height:50upx; line-height:50upx; font-size:24upx; color:#999999; }
            .demand { width:100%; height:30upx; line-height:30upx; font-size:24upx; color:#999999; }

            .layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
            .msg { width:100%; height:30upx; line-height:30upx; font-size:24upx; color:#999999; }
        }
        .get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:24upx; float:right; background:#ffffff}
    }
    .coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:#FFFFFF; border:1px solid #eeeeee; border-top:0px; }
    .coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:#FFFFFF; border:1px solid #eeeeee; border-bottom:0px; }
</style>